<template>
  <div v-loading="loading" class="building-container" element-loading-text="加载中...">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model="params.name" clearable placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="doSearch">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/enterpriseAdd')">添加企业</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="enterpriseList"
        @expand-change="expandHandle"
      >
        <el-table-column type="expand">
          <template #default="{row}">
            <div class="expand-table">
              <el-table :data="row.rentList">
                <el-table-column label="租赁楼宇" width="320" prop="buildingName" />
                <el-table-column label="租赁起始时间" prop="startTime" />
                <el-table-column label="合同状态">
                  <template #default="scope">
                    <el-tag :type="STATUS_TYPE_MAP[scope.row.status]">
                      {{ STATUS_TEXT_MAP[scope.row.status] }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180" fixed="right">
                  <template #default="scope">
                    <el-button size="mini" type="text" @click="outRent(scope.row.id)">退租</el-button>
                    <el-button size="mini" type="text" @click="delRent(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" type="index" label="序号" align="center" />
        <el-table-column prop="name" label="企业名称" width="320" />
        <el-table-column prop="contact" label="联系人" align="center" header-align="center" />
        <el-table-column prop="contactNumber" label="联系电话" align="center" header-align="center" />
        <el-table-column label="操作" align="center" header-align="center">
          <template #default="scope">
            <el-button size="mini" type="text" @click="addRent(scope.row)">添加合同</el-button>
            <el-button size="mini" type="text" @click="view(scope.row.id)">查看</el-button>
            <el-button size="mini" type="text" @click="editCard(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delExterprise(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 合同弹窗 -->
    <el-dialog
      title="添加合同"
      :visible.sync="rentDialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <div class="form-container">
        <el-form ref="addForm" :model="rentForm" :rules="rentRules" label-position="top">
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="rentForm.buildingId" placeholder="请选择">
              <el-option
                v-for="item in buildList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁起止日期" prop="rentTime">
            <el-date-picker
              v-model="rentForm.rentTime"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="租赁合同" prop="contractId">
            <el-upload
              action="#"
              :http-request="uploadHandle"
              :file-list="fileList"
              :limit="1"
              :before-upload="beforeUpload"
            >
              <el-button size="small" type="primary" plain>上传合同文件</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.doc .docx .pdf, 文件大小不超过5M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="confirmAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="params.total"
        :page-size="params.pageSize"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { getEnterpriseListAPI, delExterpriseAPI, getRentBuildListAPI, uploadAPI, createRentAPI, getRentListAPI, outRentAPI, delRentAPI } from '@/api/enterprise'

export default {
  name: 'Enterprise',
  data() {
    return {
      // 页面加载状态：控制表格加载动画
      loading: false,

      // 企业列表数据：存储从接口获取的企业信息
      enterpriseList: [],

      // 合同弹窗显示状态：控制添加合同弹窗的显示与隐藏
      rentDialogVisible: false,

      // 文件上传列表：存储上传的文件信息
      fileList: [],

      // 楼宇列表：存储可租赁的楼宇信息
      buildList: [],

      // 状态映射常量：定义合同状态的样式和文本映射
      STATUS_TYPE_MAP: {
        0: 'warning', // 待生效
        1: 'success', // 生效中
        2: 'info', // 已到期
        3: 'danger' // 已退租
      },
      STATUS_TEXT_MAP: {
        0: '待生效',
        1: '生效中',
        2: '已到期',
        3: '已退租'
      },

      // 查询参数：分页、搜索条件等参数
      params: {
        total: 0, // 总条数
        page: 1, // 当前页码
        pageSize: 5, // 每页显示条数
        name: '' // 搜索的企业名称
      },

      // 租赁表单：存储添加合同时的表单数据
      rentForm: {
        buildingId: null, // 租赁楼宇ID
        contractId: null, // 合同文件ID
        contractUrl: '', // 合同文件URL
        enterpriseId: null, // 企业ID
        type: 0, // 合同类型
        rentTime: [] // 租赁起止日期
      },

      // 表单验证规则：定义租赁表单的校验规则
      rentRules: {
        buildingId: [{ required: true, message: '请选择楼宇', trigger: 'change' }],
        rentTime: [{ required: true, message: '请选择租赁日期', trigger: 'change' }],
        contractId: [{ required: true, message: '请上传合同文件' }]
      }
    }
  },
  created() {
    // 组件创建完成后调用获取企业列表方法
    this.getEnterpriseList()
  },
  methods: {
    // 获取企业列表
    async getEnterpriseList() {
      // 1. 开启加载状态
      this.loading = true
      try {
        // 2. 调用API获取企业列表数据
        const { data: { rows, total }} = await getEnterpriseListAPI(this.params)
        // 3. 格式化数据并更新企业列表
        this.enterpriseList = rows.map(item => ({ ...item, rentList: [] }))
        // 4. 更新总条数
        this.params.total = total
      } finally {
        // 5. 关闭加载状态
        this.loading = false
      }
    },

    // 展开行时获取租赁信息
    async expandHandle(row) {
      // 1. 调用API获取当前企业的租赁信息
      const res = await getRentListAPI(row.id)
      // 2. 动态更新行的租赁信息
      this.$set(row, 'rentList', res.data)
    },

    // 查询与分页
    doSearch() {
      // 1. 重置到第一页
      this.params.page = 1
      // 2. 重新获取企业列表
      this.getEnterpriseList()
    },
    pageChange(page) {
      // 1. 更新当前页码
      this.params.page = page
      // 2. 重新获取企业列表
      this.getEnterpriseList()
    },

    // 合同相关操作
    async addRent(row) {
      // 1. 显示合同弹窗
      this.rentDialogVisible = true
      // 2. 清空文件列表
      this.fileList = []
      // 3. 重置租赁表单数据
      this.rentForm = {
        buildingId: null,
        contractId: null,
        contractUrl: '',
        enterpriseId: row.id,
        type: 0,
        rentTime: []
      }
      // 4. 获取楼宇列表
      const res = await getRentBuildListAPI()
      // 5. 更新楼宇列表
      this.buildList = res.data
    },
    closeDialog() {
      // 1. 关闭合同弹窗
      this.rentDialogVisible = false
      // 2. 重置表单字段
      this.$refs.addForm?.resetFields()
    },

    // 文件上传相关
    beforeUpload(file) {
      // 1. 定义允许的文件格式
      const validFormats = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/pdf']
      // 2. 验证文件格式
      const isValidFormat = validFormats.includes(file.type)
      // 3. 验证文件大小
      const isValidSize = file.size / 1024 / 1024 < 5

      // 4. 根据验证结果提示用户
      if (!isValidFormat) this.$message.error('仅支持上传 .doc, .docx, .pdf 格式的文件')
      if (!isValidSize) this.$message.error('文件大小不能超过 5MB')

      return isValidFormat && isValidSize
    },
    async uploadHandle({ file }) {
      // 1. 创建FormData对象并添加文件和类型
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 'contract')

      // 2. 调用API上传文件
      const { data: { id, url }} = await uploadAPI(formData)
      // 3. 更新表单中的合同ID和URL
      this.rentForm.contractId = id
      this.rentForm.contractUrl = url
      // 4. 提示用户上传成功
      this.$message.success('文件上传成功')
    },
    async confirmAdd() {
      // 1. 校验表单是否合法
      this.$refs.addForm.validate(async valid => {
        if (!valid || !this.rentForm.contractId) {
          !this.rentForm.contractId && this.$message.error('请上传合同文件')
          return
        }

        // 2. 解构表单数据
        const { buildingId, contractId, contractUrl, enterpriseId, type, rentTime } = this.rentForm
        // 3. 调用API创建合同
        await createRentAPI({
          buildingId,
          contractId,
          contractUrl,
          enterpriseId,
          type,
          startTime: rentTime[0],
          endTime: rentTime[1]
        })

        // 4. 提示用户添加成功
        this.$message.success('合同添加成功')
        // 5. 关闭弹窗并刷新企业列表
        this.rentDialogVisible = false
        this.getEnterpriseList()
      })
    },

    // 退租操作
    async outRent(rentId) {
      try {
        // 1. 弹出确认框
        await this.$confirm('确认退租吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 2. 调用API执行退租
        await outRentAPI(rentId)
        // 3. 提示用户退租成功
        this.$message.success('退租成功')
        // 4. 刷新企业列表
        this.getEnterpriseList()
      } catch {
        // 5. 用户取消操作时提示
        this.$message.info('已取消退租')
      }
    },

    // 企业操作
    view(id) {
      // 1. 跳转到企业详情页
      this.$router.push({ path: '/exterpriseDetail', query: { id }})
    },
    editCard(id) {
      // 1. 跳转到编辑企业页
      this.$router.push({ path: '/enterpriseAdd', query: { id }})
    },
    async delExterprise(id) {
      try {
        // 1. 弹出确认框
        await this.$confirm('此操作将永久删除该企业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 2. 调用API删除企业
        await delExterpriseAPI(id)
        // 3. 提示用户删除成功
        this.$message.success('删除成功')
        // 4. 刷新企业列表
        this.getEnterpriseList()
      } catch {
        // 5. 用户取消操作时提示
        this.$message.info('已取消删除')
      }
    },

    // 删除合同操作
    async delRent(rentId) {
      try {
        // 1. 弹出确认框
        await this.$confirm('此操作将永久删除该合同, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 2. 调用API删除合同
        await delRentAPI(rentId)
        // 3. 提示用户删除成功
        this.$message.success('删除成功')
        // 4. 刷新企业列表
        this.getEnterpriseList()
      } catch {
        // 5. 用户取消操作时提示
        this.$message.info('已取消删除')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}

.expand-table {
  padding: 20px;

  .expand-header {
    background-color: #f5f7fa;
    padding: 10px 20px;
    margin-bottom: 20px;
    font-weight: bold;
  }
}
</style>
